<template>
    <div id="ratings">
        <div class="rating-integrated border-1px-top">
            <div class="rating-integreated-left border-1px-right">
                <div class="total-rating">{{averageScore}}</div>
                <div class="total-title">综合评分</div>
                <div class="heighter">高于周边商家{{seller.rankRate}}</div>
            </div>
            <div class="rating-integreated-right">
                <div class="average-attitude">
                    <span class="title">服务态度</span>
                    <star :score="averageScore" :size="size"></star>
                    <span class="averageScore">{{averageScore}}</span>
                </div>
                <div class="service-attitude">
                    <span class="title">服务态度</span>
                    <star :score="seller.serviceScore" :size="size"></star>
                    <span class="serviceScore">{{seller.serviceScore}}</span>
                </div>
                <div class="deliveryTime">
                    <span class="title">送达时间</span>
                    <span class="delivery-time">{{seller.deliveryTime}}分钟</span>
                </div>
            </div>
        </div>
        <div class="scroll-wrapper" ref="scrollWrapper">
            <div class="scroll-content">
                <div class="rating-list border-1px">
                    <div class="rating-header">
                        <div class="attitude-num">
                            <span class="all" @click="clickAllRating">全部<i>{{ratings.length}}</i></span>
                            <span class="approve" @click="clickApprove">满意<i>{{approve}}</i></span>
                            <span class="disapproved" @click="clickDisApprove">不满意<i>{{ratings.length - approve}}</i></span>
                        </div>
                        <div class="attitude-choise" @click="ratingClick">
                            <span class="choise icon-check_circle" :class="onlyRating && 'onlyRating'"></span>
                            <span class="only-ratings">只看有评论的内容</span>
                        </div>
                    </div>
                </div>
                <div class="rating-wrapper">
                    <ul class="content">
                        <li  v-for="(item, index) in realRatingData" :key="index">
                            <RatingItem :rating="item" :onlyRating="onlyRating"></RatingItem>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <shopcart :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice"></shopcart>
    </div>
</template>

<script>
import axios from 'axios'
import BScroll from "better-scroll"
import Vue from "vue"
import star from './star.vue'
import RatingItem from './ratingItem.vue'
import shopcart from './shopcart.vue'

export default {
    name: "ratings",
    props: {
        seller: {
            type: Object
        },
        ratings: {
            type: Array
        }
    },
    data() {
        return {
            msg: "ratings",
            onlyRating: false,
            size: 36,
            showApprove: false,
            showDisapprove: false
        }
    },
    created () {

    },
    methods: {
        ratingClick () {
            if(this.onlyRating) {
                this.onlyRating = false
            } else {
                this.onlyRating = true
            }
        },
        clickApprove() {
            this.showApprove = true;
            this.showDisapprove = false;
            console.log(this.showDisapprove, this.showApprove);
        },
        clickDisApprove() {
            console.log(22);
            this.showDisapprove = true;
            this.showApprove = false;
            console.log(this.showDisapprove, this.showApprove);
        },
        clickAllRating() {
            this.showApprove = false;
            this.showDisapprove = false;
        },
        _initScroll() {
            this.scroll = new BScroll(this.$refs.scrollWrapper, {
                click: true
            })
        }
    },
    computed: {
        averageScore() {
            let average = 0;
            this.ratings.forEach(ele => {
                average += parseInt( ele.score );
            })
            average = (average * 10) / this.ratings.length;
            return Math.floor(average) / 10 ;
        },
        approve() {
            let count = 0;
            this.ratings.forEach(ele => {
                if(ele.rateType === 0){
                    count += 1
                }
            })
            return count;
        },
        realRatingData() {
            if(this.showApprove) {
                let arr = [];
                for(let i = 0; i < this.ratings.length; i++) {
                    if(this.ratings[i].rateType === 0) {
                        arr.push(this.ratings[i])
                    }
                }
                return arr
            } else if(this.showDisapprove) {
                let arr = [];
                for(let i = 0; i < this.ratings.length; i++) {
                    if(this.ratings[i].rateType === 1) {
                        arr.push(this.ratings[i])
                    }
                }
                return arr
            } else {
                return this.ratings
            }
        }
    },
    components: {
        star,
        RatingItem,
        shopcart
    },
    created() {
        Vue.nextTick(() => {
            this._initScroll();
        })
    }
}
</script>

<style lang="stylus" ref="stylesheet/stylus">
@import "../assets/stylus/index.styl";

#ratings
    background-color #f3f5f7
    .rating-integrated
        display flex
        background-color #fff
        border-1px(rgba(7, 17, 27, .1))
        .rating-integreated-left
            text-align center
            width 137px
            border-1px-right(rgba(7, 17, 27, 0.1))
            margin 18px 0;
            .total-rating
                font-size 24px
                color rgb(255, 153, 0)
                line-height 28px
            .total-title
                font-size 12px
                color rgb(7, 17, 27)
                line-height 18px
                margin-top 6px
            .heighter
                font-size 10px
                color rgb(7, 17, 27)
                line-height 10px
                margin-top 8px
                margin-bottom 6px
        .rating-integreated-right
            flex 1
            margin 18px 0
            box-sizing border-box
            padding 0 24px
            .average-attitude
                display flex
                // justify-content center
                align-items center
                .title
                    font-size 12px
                    color rgb(7, 17, 27)
                    line-height 18px
                    margin-right 12px
                .averageScore
                    font-size 12px
                    color rgb(255, 153, 0)
                    line-height 18px
                    margin-left 12px
            .service-attitude
                display flex
                // justify-content center
                align-items center
                margin-top 8px
                .title
                    font-size 12px
                    color rgb(7, 17, 27)
                    line-height 18px
                    margin-right 12px
                .serviceScore
                    font-size 12px
                    color rgb(255, 153, 0)
                    line-height 18px
                    margin-left 12px
            .deliveryTime
                margin-top 8px
                .title
                    font-size 12px
                    color rgb(7, 17, 27)
                    line-height 18px
                    margin-right 12px
                .delivery-time
                    font-size 12px
                    color rgb(147, 153, 159)
                    line-height 18px
    
    .scroll-wrapper
        width 100%
        height 316px
        overflow hidden 
        margin-top 20px
        .scroll-content
            .rating-list
                border-top 1px solid (rgba(7, 17, 27, .1))
                border-1px(rgba(7, 17, 27, .1))
                background-color #fff
                .rating-header
                    margin 0 18px
                    .attitude-num
                        box-sizing border-box
                        padding 18px 0
                        border-1px(rgba(7, 17, 27, .1))
                        span
                            display inline-block
                            box-sizing border-box
                            padding 12px
                            border-radius 2px
                            i
                                margin-left 3px
                                font-size 8px
                        .all
                            background-color #00A0DC
                            color #ffffff
                            font-size 14px
                            font-weight 500
                        .approve
                            background-color #ccecf8
                            font-size 14px
                            color rgb(77,  85, 93)
                            font-weight 400
                            margin-left 8px
                        .disapproved
                            background-color rgba(77, 85, 93, .2)
                            font-size 14px
                            color rgb(7,  17, 27)
                            font-weight 400
                            margin-left 8px
                .attitude-choise
                    padding 12px 0
                    .choise
                        font-size 24px
                        color rgb(147, 153, 159)
                        line-height 24px
                        vertical-align middle
                        &.onlyRating
                            color rgb(0, 160, 220)
                    .only-ratings
                        font-size 12px
                        color rgb(147, 85, 93, .2)
                        line-height 24px
            .rating-wrapper
                margin-bottom 48px
                .rating-content
                    width 100%
                    background-color #fff
                    overflow auto

</style>
